<!DOCTYPE html>
<html >

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!--360浏览器优先以webkit内核解析-->


    <title>H+ 后台主题UI框架 - 主页示例</title>

    <link rel="shortcut icon" href="favicon.ico"> <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">

    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css?v=4.1.0" rel="stylesheet">
    <style>
        /* 遮罩层样式 */
        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
            display: none; /* 默认隐藏 */
        }

        /* 弹窗样式 */
        .popup {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 20px;
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 5px;
            display: none; /* 默认隐藏 */
        }
        label {
            width: 100px;
            margin-bottom: 10px;
        }

        input[type="text"], select {
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 16px;
            color: #555;
        }

        select option {
            color: #555;
        }
        button {
            padding: 5px 10px;
            border-radius: 3px;
            border: none;
            background-color: #007bff;
            color: #fff;
            cursor: pointer;
        }
        button:hover {
            background-color: #0069d9;
        }

    </style>
    

</head>

<body class="gray-bg">
    <div class="row  border-bottom white-bg dashboard-header">
        <div class="ibox-title">
            <div class="ibox-tools">
                <button id="openbtn">添加单车信息</button>
                <a class="collapse-link">
                    <i class="fa fa-chevron-up"></i>
                </a>
                <a class="dropdown-toggle" data-toggle="dropdown" href="table_basic.html#">
                    <i class="fa fa-wrench"></i>
                </a>
                <ul class="dropdown-menu dropdown-user">
                    <li><a href="table_basic.html#">选项1</a>
                    </li>
                    <li><a href="table_basic.html#">选项2</a>
                    </li>
                </ul>
                <a class="close-link">
                    <i class="fa fa-times"></i>
                </a>
            </div>
            <div class="ibox-content" >

                <table class="table">
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>图片</th>
                        <th>名称</th>
                        <th>介绍</th>
                        <th>规格</th>
                        <th>价格</th>
                        <th>类目</th>
                        <th>库存</th>
                        <th>销量</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tr th:each="bike:${goods}">
                        <td>[(${bike.id})]</td>
                        <td>[(${bike.cover})]</td>
                        <td>[(${bike.name})]</td>
                        <td>[(${bike.intro})]</td>
                        <td>[(${bike.spec})]</td>
                        <td>[(${bike.price})]</td>
                        <td>[(${bike.typing.t_name})]</td>
                        <td>[(${bike.sales})]</td>
                        <td>
                            <a th:href="@{/deleteBike(bike_id=${bike.bike_id})}" onclick="deleteBike('${bike_id}')">删除</a >
                        </td>
                        <td>
                            <a th:href="@{/updateBike(bike_id=${bike.bike_id})}">修改</a >
                        </td>
                    </tr>
                </table>

                <script>
                    function deleteBike(bike_id){
                        var flag=confirm("确定删除？");
                        if(flag){
                            location.href="deleteBike?bike_id="+bike_id;
                        }
                    }

                </script>

            </div>
        </div>
    </div>
    </div>
    </div>
    <div class="overlay" id="overlay"></div>
    <div class="popup" id="popup">
        <form class="form-horizontal m-t" id="commentForm" action="/add" novalidate="novalidate">
            <div class="form-group">
                <label class="col-sm-3 control-label">单车编号：</label>
                <div class="col-sm-8">
                    <input id="bike_number" name="bike_number" minlength="2" type="text" class="form-control" required="" aria-required="true">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">单车状态：</label>
                <div class="col-sm-8">
                    <input id="bike_status" name="bike_status" type="text" class="form-control">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">计费价格：</label>
                <div class="col-sm-8">
                    <input id="bike_price" name="bike_price" type="text" class="form-control">
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">计费单位：</label>
                <div class="col-sm-8">
                    <input id="bike_unit" name="bike_unit"type="text" class="form-control">
                </div>
            </div>


            <div class="form-group">
                <label class="col-sm-3 control-label">剩余电量：</label>
                <div class="col-sm-8">
                    <input id="remaining_power" name="remaining_power" type="text" class="form-control">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">所在位置：</label>
                <div class="col-sm-8">
                    <input id="site_name" type="text" class="form-control" name="site_name">
                </div>
            </div>
            <button type="submit" onclick="addButton()">提交</button>
        </form>
    </div>
    <script>
        const openbtn=document.getElementById('openbtn');
        const popup=document.getElementById('popup');
        const overlay=document.getElementById('overlay');
        openbtn.addEventListener('click',function(){
            popup.style.display='block';
            overlay.style.display='block';
        })
        function addButton(){
            alert("添加成功");
        }
    </script>


    <script id="welcome-template" type="text/x-handlebars-template">
        <div class="border-bottom white-bg page-heading clearfix">
            <h2>更新日志：</h2>
            <div>今天是情人节，H+终于跨到了v3.0，就算是情人节礼物吧，感谢你们的不离不弃，一路相伴！</div>
            <div class="pull-right">——Beau-zihan / 2015.8.20</div>
        </div>
        <div class="m">
            <div class="tabs-container">
                <div class="tabs-left">
                    <ul class="nav nav-tabs">
                        <li class="active">
                            <a data-toggle="tab" href="#layouts"><i class="fa fa-columns"></i> 布局
                            </a>
                        </li>
                        <li>
                            <a data-toggle="tab" href="#new"><i class="fa fa-plus-square"></i> 新增
                            </a>
                        </li>
                        <li>
                            <a data-toggle="tab" href="#update"><i class="fa fa-arrow-circle-o-up"></i> 升级
                            </a>
                        </li>
                        <li>
                            <a data-toggle="tab" href="#revise"><i class="fa fa-pencil"></i> 修正
                            </a>
                        </li>
                        <li>
                            <a data-toggle="tab" href="#optimize"><i class="fa fa-magic"></i> 优化
                            </a>
                        </li>
                    </ul>
                    <div class="tab-content" style="line-height:1.8em;">
                        <div id="layouts" class="tab-pane active">
                            <div class="panel-body">
                                <ol class="no-left-padding">
                                    <li class="text-danger"><b>推荐：</b>期待已久的contentTabs效果，支持关闭、双击刷新、左右滑动等；</li>
                                    <li>固定左侧主菜单栏，并对菜单项做了新的调整；</li>
                                    <li>增加右侧面板及聊天窗口等。</li>
                                </ol>

                                <p style="margin-left:25px;">
                                    <hr><span class="label label-danger">特别致谢</span> 感谢[子·梦]同学提供的contentTabs优化方案和代码！</p>
                            </div>
                        </div>
                        <div id="new" class="tab-pane">
                            <div class="panel-body">
                                <ol class="no-left-padding">
                                    <li>表单：搜索自动补全插件suggest、高级表单插件（时间选择，切换按钮，图像裁剪上传，单选复选框美化，文件域美化等)等；</li>
                                    <li>图表：图表组合页面等；</li>
                                    <li>页面：团队、社交、客户管理、文章列表、文章详情、新登录页面等；</li>
                                    <li>UI元素：竖向选项卡、拖动面板、文本对比、加载动画、SweetAlert等；</li>
                                    <li>相册：layer相册、Blueimp相册等；</li>
                                    <li>表格：FooTables等。</li>
                                </ol>
                            </div>
                        </div>
                        <div id="update" class="tab-pane">
                            <div class="panel-body">
                                <ol>
                                    <li>页面弹层插件layer升级至1.9.3；</li>
                                    <li>更新jqgrid，支持树形表格；</li>
                                    <li>更新帮助文档。</li>
                                </ol>
                            </div>
                        </div>
                        <div id="revise" class="tab-pane">
                            <div class="panel-body">
                                <ol>
                                    <li>jstree、Simditor等多处错误；</li>
                                    <li>页面加载进度提示；</li>
                                    <li>Glyphicon字体图标不显示的问题；</li>
                                    <li>重新整理开发文档；</li>
                                </ol>
                            </div>
                        </div>
                        <div id="optimize" class="tab-pane">
                            <div class="panel-body">
                                <ol>
                                    <li>H+整体视觉效果；</li>
                                    <li>jstree默认主题显示效果；</li>
                                    <li>表单验证显示效果；</li>
                                    <li>iCheck显示效果；</li>
                                    <li>Tabs显示效果。</li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="alert alert-warning alert-dismissable m-t-sm">
                <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
                同时这也是一个示例，演示了如何从iframe中弹出一个覆盖父页面的层。
            </div>
        </div>
    </script>

    <!-- 全局js -->
    <script src="js/jquery.min.js?v=2.1.4"></script>
    <script src="js/bootstrap.min.js?v=3.3.6"></script>
    <script src="js/plugins/layer/layer.min.js"></script>

    <!-- 自定义js -->
    <script src="js/content.js"></script>

    <!-- 欢迎信息 -->
    <script src="js/welcome.js"></script>
</body>

</html>
